<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>138-动画-底部固定.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 3000px;
		}
		div{
			/*position: fixed;*/
			position: absolute;
			right:0;
			/*bottom: 0; */
			width: 100px;
			height: 100px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div id="box"></div>
</body>
<script>
	function animation(obj,attr,iTarget){
		//防止用户多次点击
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
		//获取当前该属性的值
			var currentVal = parseFloat(getComputedStyle(obj,false)[attr]);
		//处理透明度，将其转化为百分制数
			if(attr == "opacity"){
				currentVal = Math.round(currentVal*100);

			}
		//判断速度的取值
			if(currentVal < iTarget){
				
				iSpeed = 3;
			}else{
				iSpeed = -3;
			}	
		//动画的终止条件
			if(Math.abs(iTarget - currentVal) < Math.abs(iSpeed)){
		//判断透明度和非透明度的取值
				if(attr =="opacity"){
					obj.style[attr] = iTarget/100;

				}else{
					obj.style[attr] = iTarget + "px";
				}
		//动画终止清除定时器
				clearInterval(obj.timer);
			}else{//动画不终止
				//处理透明度和非透明度的取值
				if(attr =="opacity"){
					obj.style[attr] = (currentVal + iSpeed)/100;
				}else{
					obj.style[attr] = currentVal + iSpeed + "px";
				}
			}
		},30)
	}
	function getScrollTop(){
		return window.pageYOffset || document.documentElement.ScrollTop || document.body.scrollTop;
	}

	var oBox = document.getElementById('box');
	// oBox.style.top = (window.innerHeight - oBox.offsetHeight) + getScrollTop() + 'px'
	window.onload = window.onresize = window.onscroll = function(){
		console.log('aa');	
		var iTarget = (window.innerHeight - oBox.offsetHeight) + getScrollTop();
		animation(oBox,'top',iTarget);
	}
	// window.onload = window.onresize = window.onscroll = function(){
	// 	var h =0;
	// 	if(document.compatMode == 'CSS1Compat'){
	// 		h = document.documentElement.clientHeight;
	// 	}else{
	// 		h = document.body.clientHeight;
	// 	}
	// 	var iTop = h - oBox.offsetHeight + getScrollTop();
	// 	// oBox.style.top = iTop + "px";
	// 	animation(oBox,"top",iTop);
	// }
</script>
</html>